---
title: 第一篇博客
author: ajn404
pubDatetime: 2023-08-28 02:49:58
postSlug: 第一篇博客
featured: true
draft: false
tags:
  - astro
  - mdx
description:
  "first-blog"
---

## 目录

## 旅途开始

<details>
<summary>使用astro-paper主题</summary>

```shell
# npm 6.x
npm create astro@latest --template satnaing/astro-paper
# npm 7+, extra double-dash is needed:
npm create astro@latest -- --template satnaing/astro-paper
# yarn
yarn create astro --template satnaing/astro-paper
```
</details>

### p5js

import Basic from '@components/react/p5/noise.tsx'

<Basic client:load></Basic>

### text

import Text from '@components/react/UI/Text.tsx'

<Text client:load>文字渐变色背景使用</Text>


### framer-motion useScroll

```tsx
import "./styles.css";
import { motion, useScroll } from "framer-motion";

export default function App() {
  const { scrollYProgress } = useScroll();
  return (
    <>
      <motion.div
        className="progress-bar"
        style={{ scaleX: scrollYProgress }}
      />
    </>
  );
}

```

### css-doodle 

### basic 

import Doodle from '@components/react/doodle/basic.tsx';

<Doodle client:only="react"/>

#### noise 

todo:这个组件会使滑动卡卡的,分析原因
```tsx
import Noise from '@components/react/doodle/noise.tsx';
<Noise  client:load/>
```

```tsx
import 'css-doodle';
import {
    useEffect, useState, type ReactNode, type ReactElement, useRef
} from 'react';

interface Props {
    children: ReactNode,
    download?: Boolean
}

const Doodle: React.FunctionComponent<Props> = ({ children, download }) => {
    let value = (children as ReactElement).props.value;
    let doodle = useRef<any>(null)
    let [show, setShow] = useState(false)
    const click = () => {
        setShow(show => !show);
    }
    useEffect(() => {
        setShow(true)
    })
    const downloadClick = () => {
        doodle.current &&
            doodle.current.export({
                scale: 8,
                download: true
            });
    }
    return (
        <div>
            {show && <css-doodle ref={doodle} onClick={click}>
                {value}
            </css-doodle>}
            {download && <button onClick={downloadClick}>下载</button>}
        </div>
    );
};

export default Doodle;
```
import Common from '@components/react/doodle/common.tsx';

<Common  client:load>
@grid: 50x1 / 50vmin;
@place: center;
@size: calc(75% / @I * @i);
transform: rotate(calc(@i * 5deg));
border-radius: 30%;
border: 1px solid hsla(
  calc(10 + 4 * @i), 70%, 68%, @r.8
);
</Common>

<Common  client:load download={true}>
@grid: 14 / 50vmin;
@random \{
border-left: 1px solid #5d81bc
}
@random \{
  border-top: 1px solid #5d81bc;
}
@random(.25) \{
  background: linear-gradient(
    @p(#fff, tan, #5d81bc), @lp
  )
  50% / @r(60%) @lr
  no-repeat;
}
@random \{
  filter: drop-shadow(0 0 10px #fff);
}
</Common>

在mdx中使用dooble组件，inner children 中的'\{'需要替换成'\{'
```mdx
import Common from '@components/react/doodle/common.tsx';

<Common  client:load>
@grid: 14 / 50vmin;
@random \{
border-left: 1px solid #5d81bc
}
@random \{
  border-top: 1px solid #5d81bc;
}
@random(.25) \{
  background: linear-gradient(
    @p(#fff, tan, #5d81bc), @lp
  )
  50% / @r(60%) @lr
  no-repeat;
}
@random \{
  filter: drop-shadow(0 0 10px #fff);
}
</Common>
```

### [惯性滚动](https://www.npmjs.com/package/@studio-freight/lenis)

```shell
pnpm i @studio-freight/lenis
```

```ts
const lenis = new Lenis()
lenis.on('scroll', (e) => {
  console.log(e)
})
function raf(time) {
  lenis.raf(time)
  requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
```


### Remark 和 Rehype

> Remark 和 Rehype 都是用于将 Markdown 转换为 HTML 的工具。
<br/>Remark 是一个基于 Node.js 的 Markdown 解析器，它将 Markdown 文本解析为 HTML。它支持插件系统，允许用户自定义解析过程。Remark 通常用于生成静态站点，例如博客或文档。
<br/>Rehype 是一个基于 Remark 的工具，它提供了额外的功能，例如代码高亮、表格和引用。Rehype 支持多种语言，包括 JavaScript、Python、CSS 和 HTML。Rehype 通常与 Remark 一起使用，以便在解析 Markdown 时应用额外的功能。

例如[rehype-autolink-headings](https://github.com/rehypejs/rehype-autolink-headings) is a rehype plugin to add links from headings back to themselves.

### 相关链接

- [css-doodle](https://css-doodle.com/)
- [observablehq yuanchuan](https://observablehq.com/@yuanchuan)